<template>
  <div class="applicationDeployment">
    <div class="mains_contain">
      <div class="appTitle">部署</div>
      <el-steps :active="active" process-status='success' finish-status='success' align-center style="margin-bottom: 20px">
        <el-step title="配置安装信息"></el-step>
        <el-step title="确认安装信息"></el-step>
        <!-- <el-step title="应用停止"></el-step>
        <el-step title="应用卸载"></el-step> -->
        <el-step title="应用下载"></el-step>
        <el-step title="应用安装"></el-step>
        <el-step title="应用启动"></el-step>
      </el-steps>
      <div class="contant" v-if="active == 0">
        <el-table :data="tableData" style="width: 100%; margin-top: 10px" default-expand-all @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini"
          highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <!-- <el-table-column type="selection" width="40" /> -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="tableTitle">详细信息</div>
              <el-table :data="checkDataList" border stripe size="mini" highlight-current-row :max-height="maxHeight1" :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="appName" label="任务名称" />
                <el-table-column prop="deviceSn" label="设备标识" />
                <el-table-column prop="deviceName" label="设备名称" />
                <el-table-column prop="deviceModel" label="设备型号" />
                <!-- <el-table-column prop="name" label="在线状态" /> -->
                <el-table-column prop="deviceStatus" label="设备状态">
                  <template slot-scope="scope">
                    <span style="color: #67c23a" v-if="scope.row.deviceStatus == 'ONLINE'">在线</span>
                    <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'OFFLINE'">离线</span>
                    <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'WARNING'">告警</span>
                    <span style="color: #e6a23c" v-if="scope.row.deviceStatus == 'INACTIVE'">未注册</span>
                  </template>
                </el-table-column>
                <el-table-column prop="containerName" label="容器名称" />
                <el-table-column prop="containerIp" label="容器IP地址" />
                <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" width="120" />
                <el-table-column prop="containerStorageTotal" label="存储空间（MB）" width="120" />
                <el-table-column props="devices" label="物理接口">
                  <template slot-scope="scope">
                    <span>{{ scope.row.devices? scope.row.devices.toString():'' }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                  <template slot-scope="{ row ,$index }">
                    <el-button size="mini" type="text" icon="el-icon-plus" @click="addyy(row,$index)">选择容器</el-button>
                    <el-button size="mini" type="text" style="color: #f56c6c" icon="el-icon-delete" @click="deleteSer(row,$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="应用名称" />
          <el-table-column prop="version" label="应用版本" />
          <el-table-column prop="filesize" label="应用大小" />
          <el-table-column prop="manufactor" label="厂家" />
          <el-table-column prop="operatingSystem" label="操作系统" />
          <el-table-column prop="framework" label="架构" />
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" icon="el-icon-plus" @click="addServer(row)">添加设备</el-button>
              <!-- <el-button size="mini" type="text" style="color: #f56c6c" icon="el-icon-delete" @click="deleteSer(row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
       <div class="containList" v-if="active == 1">
        <div class="containItem">
          <div class="containItem_top">
            <img src="../../assets/images/xhlogo.png" alt="" />
            <div class="right">
              <div>{{ tableData[0].name  }}</div>
            </div>  
          </div>
          <div class="containItem_bottom">
              <ul>
                <li>
                  <span> 容器版本： </span>
                  <span>{{  tableData[0].version }}</span>
              </li>
               <li>
                  <span> 适配容器： </span>
                  <span>{{  tableData[0].remark || '--' }}</span>
              </li>
                <li>
                  <span> 容器大小： </span>
                  <span>{{ tableData[0].filesize  }}</span>
              </li>
                <li>
                  <span> 厂家： </span>
                  <span>{{ tableData[0].manufactor }}</span>
              </li>
                <li>
                  <span> 操作系统： </span>
                  <span>{{ tableData[0].operatingSystem  }}</span>
              </li>
                <li>
                  <span>位数： </span>
                  <span>{{  tableData[0].framework  }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <el-table :data="checkDataList" border stripe size="mini" highlight-current-row :max-height="maxHeight1" :header-cell-style="{ background: '#e5e5e5', color: '#000' }" v-if="active!=0">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="appName" label="任务名称" />
        <el-table-column prop="deviceSn" label="设备标识" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="deviceModel" label="设备型号" />
        <!-- <el-table-column prop="name" label="在线状态" /> -->
        <el-table-column prop="deviceStatus" label="设备状态">
          <template slot-scope="scope">
            <span style="color: #67c23a" v-if="scope.row.deviceStatus == 'ONLINE'">在线</span>
            <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'OFFLINE'">离线</span>
            <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'WARNING'">告警</span>
            <span style="color: #e6a23c" v-if="scope.row.deviceStatus == 'INACTIVE'">未注册</span>
          </template>
        </el-table-column>
        <el-table-column prop="containerName" label="容器名称" />
        <el-table-column prop="containerIp" label="容器IP地址" />
        <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" width="120" />
        <el-table-column prop="containerStorageTotal" label="存储空间（MB）" width="120" />
        <el-table-column props="devices" label="物理接口">
          <template slot-scope="scope">
            <span>{{ scope.row.devices? scope.row.devices.toString():'' }}</span>
          </template>
        </el-table-column>
        <template v-if="active==2">
          <el-table-column prop="shellExcuteStatus" label="下载状态">
            <template slot-scope="scope">
              <span style="color:#409EFF" v-if="scope.row.shellExcuteStatus == '0'">执行中</span>
              <span style="color: #67c23a" v-if="scope.row.shellExcuteStatus == '1'">成功</span>
              <span style="color: #F56C6C" v-if="scope.row.shellExcuteStatus == '2'">失败</span>
            </template>
          </el-table-column>
        </template>
        <template v-if="active==3">
          <el-table-column prop="shellExcuteStatus" label="安装状态">
            <template slot-scope="scope">
              <span style="color:#409EFF" v-if="scope.row.shellExcuteStatus == '0'">执行中</span>
              <span style="color: #67c23a" v-if="scope.row.shellExcuteStatus == '1'">成功</span>
              <span style="color: #F56C6C" v-if="scope.row.shellExcuteStatus == '2'">失败</span>
            </template>
          </el-table-column>
        </template>
        <template v-if="active==4">
          <el-table-column prop="shellExcuteStatus" label="启动状态">
            <template slot-scope="scope">
              <span style="color:#409EFF" v-if="scope.row.shellExcuteStatus == '0'">执行中</span>
              <span style="color: #67c23a" v-if="scope.row.shellExcuteStatus == '1'">成功</span>
              <span style="color: #F56C6C" v-if="scope.row.shellExcuteStatus == '2'">失败</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="footBtn">
        <el-button type="primary" size="mini" @click="uploadCon(active)" v-if="active==1||active==0">下一步</el-button>
        <el-button type="primary" size="mini" @click="uploadCon(active)" v-if="active==2">安装</el-button>
        <el-button type="primary" size="mini" @click="uploadCon(active)" v-if="active==3">启动</el-button>
        <el-button type="primary" size="mini" @click="uploadCon(6)" v-if="active==4">完成</el-button>
        <el-button size="mini" @click="cancle">取消</el-button>
      </div>

      <el-dialog title="添加设备" :visible.sync="dialogVisible" width="50%" top="5%" destroy-on-close @closed="onClosed" :close-on-click-modal="false">
        <el-form :inline="true" label-position="left" :model="dialogSearchForm" size="small" label-width="80px">
          <el-form-item label="设备名称">
            <el-input v-model="dialogSearchForm.name" clearable placeholder="请输入设备名称" />
          </el-form-item>
          <el-form-item label="设备标识">
            <el-input v-model="dialogSearchForm.nodeId" clearable placeholder="请输入设备标识" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogSearch" size="mini" icon="el-icon-search">查询</el-button>
            <!-- <el-button type="primary" @click="aaaa" size="mini" icon="el-icon-search">查询111</el-button> -->
          </el-form-item>
        </el-form>
        <el-table :data="dialogTableData" style="width: 100%" ref="deviceTable" v-el-table-infinite-scroll="load" @selection-change="handleSelectionChange" fit :max-height="500" border stripe
          size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="nodeId" label="设备标识" />
          <el-table-column prop="model" label="设备型号" />
          <el-table-column prop="status" label="设备状态">
            <template slot-scope="scope">
              <span style="color: #67c23a" v-if="scope.row.status == 'ONLINE'">在线</span>
              <span style="color: #f56c6c" v-if="scope.row.status == 'OFFLINE'">离线</span>
              <span style="color: #f56c6c" v-if="scope.row.status == 'WARNING'">告警</span>
              <span style="color: #e6a23c" v-if="scope.row.status == 'INACTIVE'">未注册</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 20px">共{{ total }}条</div>
        <div style="text-align: right; margin-top: 20px">
          <el-button type="primary" @click="handleSave" size="small">添加</el-button>
          <el-button @click="cancles" size="small">取消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="选择容器" :visible.sync="dialogVisible1" width="50%" top="5%" destroy-on-close @closed="onClosed" :close-on-click-modal="false">
        <el-form :inline="true" label-position="left" :model="dialogSearchForm" size="small" label-width="100px">
          <el-form-item label="容器名称">
            <el-input v-model="dialogSearchForm.containerName" clearable placeholder="请输入容器名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogSearchContain" size="mini" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dialogTableDataContainer" style="width: 100%" ref="containTable" @selection-change="handleSelectionChangeContainer" fit :max-height="500" border stripe size="mini"
          highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="name" label="容器名称" />
          <el-table-column prop="ip" label="容器IP地址" />
          <el-table-column prop="memoryTotal" label="分配内存（MB）">
          </el-table-column>
          <el-table-column prop="storageTotal" label="存储空间（MB）">
          </el-table-column>
          <el-table-column props="devices" label="物理接口">
            <template slot-scope="scope">
              <span>{{ scope.row.devices? scope.row.devices.toString():'' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 20px">
          <el-button type="primary" @click="handleSaveAdd" size="small">添加</el-button>
          <el-button @click="cancleContain" size="small">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { choiceDevice, containerList, appTask, appTaskId, commandTask } from "@/api/application"
import { debounce } from "@/utils/index";
import elTableInfiniteScroll from "el-table-infinite-scroll";

export default {
  inject: ['reload'],
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  data() {
    return {
      getRowKeys(row) {
        //设置row-key只展示一行
        return row.nodeId;
      },
      dialogVisible: false,
      dialogVisible1: false,
      // active: 0,   //stop --2    3--  uninstall   4--download  5--install    6  --start
      active: 0,   //   2--download  3--install    4  --start
      dialogSearchForm: { nodeType: 'GATEWAY' },
      dialogTableData: [],
      dialogTableDataContainer: [],
      tableData: [],
      scrollNum: 1,
      isFlag: 0,
      page: 1,
      pageSize: 30,
      total: 0,
      checkData: [],
      checkDataList: [],
      checkDataNodeId: [],
      maxHeight1: 400,
      appName: {},
      checkDataContain: [],
      containerTaskIdList: [],
      nowIndex: '',
      timer: null,
      backList: {},
      nodeIds: ''
    };
  },
  //   0   执行中   1 成功    2 失败
  destroyed() {
    localStorage.removeItem('appName')
    localStorage.removeItem('taskList')
    localStorage.removeItem('taskIds')
    localStorage.removeItem('nowStatus')
    window.clearTimeout(this.timer);
  },
  mounted() {
    this.appName = JSON.parse(localStorage.getItem('appName'))
    let datas = JSON.parse(localStorage.getItem('taskList'))
    let ids = this.$route.query.taskId
    let commandType = this.$route.query.commandType
    let taskIds = localStorage.getItem('taskIds')
    let nowStatus = localStorage.getItem('nowStatus')
    if (datas) {
      this.tableData = datas
    }
    if (ids && commandType) {
      this.getList(ids, commandType)
    }
    if (taskIds && nowStatus) {
      this.getList(taskIds, nowStatus)
    }
    this.load()
    // this.getContainList()
  },
  methods: {
    cancleContain() {
      this.dialogVisible1 = false
      this.dialogSearchForm = {}
    },
    cancles() {
      this.dialogVisible = false
      this.dialogSearchForm = {}
    },
    getList(id, commandType) {
      let self = this
      appTaskId({ taskId: id, commandType: commandType }).then(res => {
        let rq = res.data // let obj = {
        this.backList = res.data
        if (res.code == '200') {
          this.checkDataList = rq.appList
          if (this.active == 0) {
            this.tableData = rq.appList
          }
          let nowStatus = ''
          // switch (rq.taskStatus) {
          //   case 'stop':
          //     this.active = 2
          //     nowStatus = 'AppStop'
          //     break;
          //   case 'uninstall':
          //     this.active = 3
          //     nowStatus = 'AppUninstall'

          //     break;
          //   case 'download':
          //     nowStatus = 'AppDownload'

          //     this.active = 4
          //     break;
          //   case 'install':
          //     this.active = 5
          //     nowStatus = 'AppInstall'

          //     break;
          //   case 'start':
          //     this.active = 6
          //     nowStatus = 'AppStart'
          //     break;
          //   default:
          //     break;
          // }

          switch (rq.taskStatus) {
            // case 'stop':
            //   nowStatus = 'AppStop'
            //   this.active = 2
            //   break;
            case 'download':
              nowStatus = 'AppDownload'
              this.active = 2
              break;
            case 'install':
              this.active = 3
              nowStatus = 'AppInstall'

              break;
            case 'start':
              this.active = 4
              nowStatus = 'AppStart'
              break;
            default:
              break;
          }

          localStorage.setItem('nowStatus', nowStatus)
          // let flag = this.checkDataList.every(item => {
          //   return item.shellExcuteStatus != null
          // })
          let flag = false
          if (this.checkDataList.length) {
            this.checkDataList.forEach(item => {
              item.appName = rq.taskName
            })
            this.checkDataList.some(item => {
              if (item.shellExcuteStatus == '0' || item.shellExcuteStatus == null) {
                flag = true
                return true
              }
            })
          } else {
            flag = true
          }
          if (!flag) {
            window.clearTimeout(this.timer);
          } else {
            this.timer = setTimeout(() => {
              self.getList(id, commandType)
            }, 5000)
          }

        }

      })
    },
    getContainList(id) {
      let data = {
        deviceNodeId: id,
        containerName: this.dialogSearchForm.containerName,
      }
      containerList(data).then(res => {
        if (res.code == '200') {
          this.dialogTableDataContainer = res.data
        }
      })
    },

    //选择容器
    handleSaveAdd() {
      if (this.checkDataContain.length == 0) {
        return this.$message({
          message: "至少选择一个容器",
          type: "warning",
        });
      } else if (this.checkDataContain && this.checkDataContain.length > 1) {
        return this.$message({
          message: "最多只能选择一个容器",
          type: "warning",
        });
      } else {
        let arr = []
        let datas = this.checkDataList[this.nowIndex]
        let checkD = this.checkDataContain[0]
        this.$set(datas, 'containerName', checkD.name)
        this.$set(datas, 'containerId', checkD.id)
        this.$set(datas, 'containerIp', checkD.ip)
        this.$set(datas, 'containerMemoryTotal', checkD.memoryTotal)
        this.$set(datas, 'containerStorageTotal', checkD.storageTotal)
        this.$set(datas, 'devices', checkD.devices)
        this.$set(datas, 'containerHyperv', checkD.hyperv)
        this.checkDataList.forEach(val => {
          arr.push(val)
        })
        this.$nextTick(() => {
          this.checkDataList = arr
        })
        this.dialogVisible1 = false;
      }

    },
    handleSave() {
      if (!this.checkDataNodeId.length) {
        this.$message({
          message: "请选择设备",
          type: "warning",
        });
        return;
      }
      this.dialogVisible = false
      this.checkDataList = []
      this.checkDataList = this.dialogTableData.filter(item => {
        return this.checkDataNodeId.indexOf(item.nodeId) > -1
      })
      this.checkDataList.forEach(item => {
        // item.delete.name
        item.deviceSn = item.nodeId
        item.deviceName = item.name
        item.deviceModel = item.model
        item.deviceStatus = item.status
        item.appName = this.appName.name
        item.name = ''
        item.ip = ''
        item.memoryTotal = ''
        item.storageTotal = ''
        item.devices = ''
        item.containerId = ''
        // item.name = tableData[0].name
      })
    },
    load: debounce(function () {
      this.page = this.scrollNum;
      // if (this.isFlag) {
      //   this.$message({
      //     message: "暂无数据",
      //     type: "warning",
      //   });
      //   return;
      // }
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.dialogSearchForm.name,
        nodeId: this.dialogSearchForm.nodeId,
        nodeType: 'GATEWAY'
      }
      // this.dialogTableData = []
      choiceDevice(data).then(resp => {
        if (resp.data.records && resp.data.records.length) {
          this.dialogTableData = this.dialogTableData.concat(resp.data.records)
          this.total = resp.data.total;
          this.scrollNum += 1;
          this.checkList()
        } else {
          // this.isFlag = 1;
        }
      })
    }, 1000),
    back(v) {
      switch (v) {
        case 1:
          this.active = 0;
          break;
        case 2:
          this.active = 1;
          break;
        case 3:
          this.active = 2;
          break;
        case 4:
          this.active = 3;
          break;
        case 5:
          this.active = 4;
          break;
        case 6:
          this.active = 5;
          break;
        default:
          break;
      }
    },

    //下一步
    uploadCon(v) {
      let flag2 = false
      let flag3 = null
      if (v == 6) {
        this.$router.push({ path: '/myApplication' })
      }
      if (v > 1) {
        this.checkDataList.some(item => {
          if (item.shellExcuteStatus == '0' || item.shellExcuteStatus == null) {
            flag2 = true
            return true
          }
        })
        if (flag2) {
          this.$message({
            message: "有任务正在进行中,请稍等!",
            type: "warning",
          });
        }
        flag3 = this.checkDataList.every(item => {
          return item.shellExcuteStatus == '2'
        })
        if (flag3 && v != 6) {
          return this.$message({
            message: "任务全部失败,请重新更换任务!",
            type: "warning",
          });
        }
      }
      switch (v) {
        case 0:
          let flag = false
          if (this.checkDataList && this.checkDataList.length) {
            this.checkDataList.some(item => {
              if (item.containerName == '' || item.containerName == null) {
                flag = true
                return true
              }
            })
            if (flag) {
              this.$message({
                message: "请选择容器",
                type: "warning",
              });
            } else {
              this.active = 1;
            }
          } else {
            return this.$message({
              message: "请至少选择一个设备",
              type: "warning",
            });
          }
          break;
        case 1:
          this.$confirm(`您将对${this.tableData[0].name}应用进行安装,请核查是否确认需要进行安装！?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.active = 2;
            this.addTask()
          })
          break;
        // case 2:
        //   if (!flag2 && !flag3) {
        //     this.active = 3
        //     this.command('AppUninstall')
        //   }
        //   break;
        // case 3:
        //   if (!flag2 && !flag3) {
        //     this.active = 4
        //     this.command('AppDownload')
        //   }
        //   break;
        // case 4:
        //   if (!flag2 && !flag3) {
        //     this.active = 5
        //     this.command('AppInstall')
        //   }
        //   break;
        // case 5:
        //   if (!flag2 && !flag3) {
        //     this.active = 6
        //     this.command('AppStart')
        //   }
        //   break;
        case 2:
          if (!flag2 && !flag3) {
            this.active = 3
            this.command('AppInstall')
          }
          break;
        case 3:
          if (!flag2 && !flag3) {
            this.active = 4
            this.command('AppStart')
          }
          break;
        default:
          break;
      }
    },

    //下发命令
    command(v) {
      this.backList.commandType = v
      this.backList.appList = this.backList.appList.filter(item => {
        return item.shellExcuteStatus == '1'
      })
      commandTask(this.backList).then(res => {
        setTimeout(() => {
          this.$router.replace({ path: "/applicationDeployment", query: { taskId: res.message, commandType: v } });
          this.reload()
        }, 500)
      })
    },
    //确定创建任务
    addTask() {
      this.checkDataList.forEach(item => {
        delete item.createTime
        delete item.id
        delete item.name
        delete item.status
        item.fileId = this.tableData[0].id
        item.name = this.tableData[0].name
      })
      let data = {
        appFileFactory: this.tableData[0].manufactor,
        appFileId: this.tableData[0].id,
        appFileName: this.tableData[0].name,
        appFileOperatingSystem: this.tableData[0].operatingSystem,
        appFileSchema: this.tableData[0].framework,
        appFileSize: this.tableData[0].filesize,
        appFileVersion: this.tableData[0].version,
        taskName: this.appName.name,
        appList: this.checkDataList,
        tenantId: this.appName.tenantId,
        hyperv: '',
        // commandType: 'AppStop'
        commandType: 'AppDownload'

      }
      appTask(data).then(res => {
        if (res.code == '200') {
          // this.appTaskW(res.message)
          this.getList(res.message)
          localStorage.setItem('taskIds', res.message)
          // localStorage.setItem('nowStatus', 'AppStop')
          localStorage.setItem('nowStatus', 'AppDownload')
        }
      })
    },
    cancle() {
      // this.$router.push({ path: '/myApplication' })
      this.$router.push({ path: '/myApplication' })

    },
    //设备 选择
    handleSelectionChange(val) {
      this.checkDataNodeId = []
      if (val && val.length) {
        val.forEach(item => {
          if (this.checkDataNodeId.indexOf(item.nodeId) < 0) {
            this.checkDataNodeId.push(item.nodeId)
          }
        })
      }

    },

    //容器选择
    handleSelectionChangeContainer(val) {
      this.checkDataContain = val
      this.containerTaskIdList = []
      if (val && val.length) {
        val.forEach(item => {
          if (this.containerTaskIdList.indexOf(item.id) < 0) {
            this.containerTaskIdList.push(item.id)
          }
        })
      }
    },
    checkList() {
      this.checkDataList.forEach((val) => {
        if (this.checkDataNodeId.indexOf(val.nodeId) > -1) {
          this.$nextTick(() => {
            this.$refs.deviceTable.toggleRowSelection(val);
          })
        }
      });
    },
    checkListContain() {
      this.dialogTableDataContainer.forEach((val) => {
        if (this.containerTaskIdList.indexOf(val.id) > -1) {
          this.$nextTick(() => {
            this.$refs.containTable.toggleRowSelection(val);
          })
        }
      });
    },
    addServer() {
      this.dialogVisible = true;
      this.checkList()
    },
    addyy(row, index) {
      this.nowIndex = index
      this.nodeIds = row.nodeId
      this.dialogVisible1 = true;
      this.getContainList(row.nodeId)

      // this.checkListContain()
    },
    //删除列表中的某一项
    deleteSer(row, index) {
      this.$confirm("此操作将删除此条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.checkDataList.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getPageList() { },

    onClosed() { },
    dialogSearch: debounce(function () {
      this.page = 1
      this.scrollNum = 1
      this.load()
      this.dialogTableData = []
      this.total = 0
    }, 1500),
    dialogSearchContain: debounce(function () {
      this.getContainList(this.nodeIds)
    }, 1500)
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 290;
    },
  },
};
</script>
<style lang="scss" scoped>
.applicationDeployment {
  padding: 20px;
  .appTitle {
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
  }
  .tableTitle {
    color: #333;
    margin-bottom: 20px;
  }
  .footBtn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>